<!--
概念: Vue 组件实例在创建时要经历一系列的初始化步骤, 在此过程中 Vue 会在何时的时机, 调用特定函数,
从而让开发者有机会在特定阶段运行自己的代码, 这些特定的函数称为--生命周期钩子

钩子 ==> 生命周期函数
组件的生命周期: 在特定的时刻, 调用特定的函数.
生命周期、生命周期函数、生命周期钩子

规律: 生命周期整体分为四个阶段: 创建、挂载、更新、销毁; 么个阶段两个钩子, 一前一后.

组件的生命周期:
  【时刻】                    【Vue2 调用特定的函数】       【Vue3】
- 创建 (创建前, 创建完毕)       beforeCreate, created       setup
- 挂载 (挂载前, 挂载完毕)       beforeMount, mounted        onBeforeMount, onMounted
- 更新 (更新前, 更新完毕)       beforeUpdate, updated       onBeforeUpdate, onUpdated
- 销毁/卸载 (销毁前, 销毁完毕)  beforeDestroy, destroyed    onBeforeUnmount, onUnmounted

常用的钩子: 
- onMounted(挂载完毕)
- onUpdated(更新完毕)
- onBeforeUnmount(卸载之前)
-->
<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点我 sum + 1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

// 数据
let sum = ref(0)

// 方法
function add () {
  sum.value += 1
}

// 创建 beforeCreate, created => setup 函数
console.log("创建")

// 挂载 beforeMount, mounted => onBeforeMount, onMounted
// 挂载前
onBeforeMount(() => console.log("挂载前"))  // 设定 beforeMount 的回调函数
// 挂载完毕
onMounted(() => console.log("挂载完毕"))  // 设定 onMounted 的回调函数

// 更新 beforeUpdate, updated => onBeforeUpdate, onUpdated
// 更新前
onBeforeUpdate(() => console.log("更新前"))
// 更新完毕
onUpdated(() => console.log("更新完毕"))

// 销毁 beforeDestroy, destroyed => 卸载 onBeforeUnmount, onUnmounted
// 卸载前
onBeforeUnmount(() => console.log("卸载前"))
// 卸载完毕
onUnmounted(() => console.log("卸载完毕"))

</script>

<style scoped> 
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>